<template>
  <span></span>
</template>
<script lang="ts" setup>
import LogicFlow from '@logicflow/core'
import { message } from 'ant-design-vue'
import { onMounted } from 'vue'

const props = defineProps<{
  lf: LogicFlow
}>()

onMounted(() => {
  const lf = props.lf
  if (lf) {
    // 流程左侧节点面板
    lf.extension.dndPanel.setPatternItems([
      // {
      //   label: '选区',
      //   className: 'custom-selection',
      //   icon: '',
      //   callback: () => {
      //     lf.openSelectionSelect()
      //     lf.once('selection:selected', () => {
      //       lf.closeSelectionSelect()
      //     })
      //   }
      // },
      {
        type: 'userTask',
        label: '审批节点',
        icon: '',
        className: 'important-node',
        properties: {
          name: '审批节点',
          'flowable:dataType': 'fixed',
          'flowable:memberType': 0,
          'flowable:multiInstance': 'parallel',
          'flowable:resultType': 'every',
          'flowable:backTo': 'Flow_0000002',
          'flowable:returnTo': 'Flow_0000002',
          'flowable:backStartNode': '',
          'flowable:returnUpdateAfterApprovalNode': '',
          'flowable:initiatorVisible': true,
          multiInstanceLoopCharacteristics: {
            'flowable:collection': 'approvalList',
            'flowable:elementVariable': 'approval',
            isSequential: false,
            completionCondition: {
              value: 1
            }
          }
        }
      },
      {
        type: 'exclusiveGateway',
        label: '条件判断',
        icon: '',
        className: 'important-node',
        properties: {
          name: '条件判断-0',
          'flowable:conditionType': 0
        }
      }
      // {
      //   type: 'exclusiveGateway',
      //   label: '条件判断',
      //   icon: '',
      //   className: 'important-node',
      //   properties: {
      //     name: '条件判断'
      //   }
      // }
      // {
      //   type: 'endEvent',
      //   label: '结束节点',
      //   icon: '',
      //   className: 'important-node',
      //   properties: {
      //     name: '结束节点'
      //   }
      // }
      // {
      //   type: 'sendTask',
      //   label: '抄送节点',
      //   icon: '',
      //   className: 'important-node',
      //   properties: {
      //     name: '抄送节点'
      //   }
      // }
    ])
    lf.on('selection:selected', () => {
      lf.updateEditConfig({
        stopMoveGraph: false
      })
    })
    lf.on('connection:not-allowed', (data) => {
      message.error(data.msg)
    })
  }
})

const openSelection = () => {
  props.lf.updateEditConfig({
    stopMoveGraph: true
  })
}

// 按钮方式添加节点
const addUserTaskNode = () => {
  const width = props.lf.graphModel.width
  const height = props.lf.graphModel.height
  props.lf.addNode({
    type: 'userTask',
    x: (width - 170) / 2,
    y: height - 70,
    properties: {
      name: '审批节点',
      'flowable:dataType': 'fixed',
      'flowable:memberType': 0,
      'flowable:multiInstance': 'parallel',
      'flowable:resultType': 'every',
      'flowable:backTo': 'Flow_0000002',
      'flowable:returnTo': 'Flow_0000002',
      'flowable:backStartNode': '',
      'flowable:returnUpdateAfterApprovalNode': '',
      'flowable:initiatorVisible': true,
      multiInstanceLoopCharacteristics: {
        'flowable:collection': 'approvalList',
        'flowable:elementVariable': 'approval',
        isSequential: false,
        completionCondition: {
          value: 1
        }
      }
    }
  })
}
// 按钮方式添加节点
const addSendTaskNode = () => {
  const width = (props.lf as LogicFlow).graphModel.width
  const height = (props.lf as LogicFlow).graphModel.height
  props.lf.addNode({
    type: 'sendTask',
    x: (width - 170) / 2,
    y: height - 70,
    properties: { name: '抄送节点' }
  })
}

defineExpose({
  openSelection,
  addUserTaskNode,
  addSendTaskNode
})

// export default {
//   name: 'BpmnNodePanel',
//   props: {
//     lf: Object as PropType<LogicFlow>
//   },
//   data() {
//     return {}
//   },

//   mounted() {
//     //选区框选使用的
//     const lf = this.props.lf
//     if (lf) {
//       lf.on('selection:selected', () => {
//         lf.updateEditConfig({
//           stopMoveGraph: false
//         })
//       })
//       lf.on('connection:not-allowed', (data) => {
//         message.error(data.msg)
//       })
//     }
//   },
//   methods: {
//     openSelection() {
//       ;(this.props.lf as LogicFlow).updateEditConfig({
//         stopMoveGraph: true
//       })
//     },
//     addUserTaskNode() {
//       const width = (this.$props.lf as LogicFlow).graphModel.width
//       const height = (this.$props.lf as LogicFlow).graphModel.height
//       ;(this.$props.lf as LogicFlow).addNode({
//         type: 'userTask',
//         x: (width - 170) / 2,
//         y: height - 70,
//         properties: {
//           name: '审批节点',
//           'flowable:dataType': 'fixed',
//           'flowable:memberType': 0,
//           'flowable:multiInstance': 'parallel',
//           'flowable:resultType': 'every',
//           'flowable:backTo': 'Flow_0000002',
//           'flowable:returnTo': 'Flow_0000002',
//           'flowable:backStartNode': 'Flow_0000002',
//           'flowable:returnUpdateAfterApprovalNode': 'Flow_0000002',
//           'flowable:initiatorVisible': true,
//           multiInstanceLoopCharacteristics: {
//             'flowable:collection': 'approvalList',
//             'flowable:elementVariable': 'approval',
//             isSequential: false,
//             completionCondition: {
//               value: 1
//             }
//           }
//         }
//       })
//     },
//     addSendTaskNode() {
//       const width = (this.$props.lf as LogicFlow).graphModel.width
//       const height = (this.$props.lf as LogicFlow).graphModel.height
//       ;(this.$props.lf as LogicFlow).addNode({
//         type: 'sendTask',
//         x: (width - 170) / 2,
//         y: height - 70,
//         properties: { name: '抄送节点' }
//       })
//     }
//   }
// }
</script>
<style>
.node-panel {
  position: absolute;
  top: 100px;
  left: 10px;
  width: 50px;
  padding: 10px;
  background-color: white;
  box-shadow: 0 0 10px 1px rgb(228, 224, 219);
  border-radius: 6px;
  text-align: center;
  z-index: 101;
}
.important-node {
  padding-bottom: 20px;
}
.node-item {
  margin-bottom: 10px;
}
.node-item-icon {
  width: 30px;
  height: 30px;
  /* margin-left: 10px; */
  background-size: cover;
}
.node-label {
  font-size: 12px;
  margin-top: 5px;
  user-select: none;
}

.bpmn-selection {
  background: url()
    center center no-repeat;
  cursor: grab;
}

.bpmn-start {
  background: url()
    center center no-repeat;
  cursor: grab;
}
.bpmn-end {
  background: url()
    center center no-repeat;
  cursor: grab;
}
.bpmn-user {
  background: url()
    center center no-repeat;
  cursor: grab;
}
.bpmn-gateway {
  background: url()
    center center no-repeat;
  cursor: grab;
}

.bpmn-service {
  background: url()
    center center no-repeat;
  cursor: grab;
}
</style>
